<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="../../css/layui.css" rel="stylesheet" />
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .main {
        width: 100%;
        height: 100%;
        background-color: #011032;
    }

    .hander {
        height: 20px;
    }

        .hander > b {
            font-size: 20px;
            color: #fff;
            float: right;
            margin-top: 5px;
            margin-right: 25px;
        }

    .content {
        margin: 30px;
        padding: 70px;
    }

        .content .layui-form-label {
            color: #fff;
        }

    .input-file {
        width: 90%;
        display: initial;
    }

    .layui-btn {
        background-color: #2CB6F5;
        float: right;
        width: 100px;
    }

    input {
        background-color: #626262 !important;
        color: #fff;
    }

    .input-file::-webkit-input-placeholder {
        color: #fff !important;
    }

    .input-file::-moz-placeholder {
        color: #fff !important;
    }

    .input-file::-ms-input-placeholder {
        color: #fff !important;
    }

    .layui-textarea {
        background-color: #626262 !important;
        color: #fff;
    }
</style>

<body>
    <div class="main">
        <div class="hander">
            <b>x</b>
        </div>
        <div class="content">
            <!--action="/fileUpload/upload" method="post" enctype="multipart/form-data"-->
            <form class="layui-form" method="post" enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择文件</label>
                    <div class="layui-input-block">
                        <input type="file" id="test3" name="file" required lay-verify="required" placeholder="点击这里上传文件"
                            autocomplete="off" class="layui-input input-file">
                        <button type="button" class="layui-btn" id="test1">加载</button>
                        <!-- <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                            <button type="button" class="layui-btn" id="test9">开始上传</button>
                        </div> -->
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input id="test2" type="text" name="title" required lay-verify="required"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea id="desc" name="desc" placeholder="" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">上传</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script>

        $.ajax({
            type: "post",
            //url: "http://localhost:31100/fileUpload/upload",
            url: "http://192.168.1.190:8081/geoserver/luwang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=luwang:luwang&maxFeatures=50&outputFormat=application/json&viewparams=x1:117.228;y1:31.8952;x2:117.228;y2:31.8952",
            //contentType:"application/json;charset=utf-8",
            async: false,
            success: function (data) {
                
                var check;
                var code = data.code;
                if (code != 200) {
                    alert(data.message);
                } else {
                    window.localStorage.setItem('username', data.user.name);
                    window.opener = null;
                    window.open(' ', '_self');
                    window.close();
                    window.open(url + "szsp.html");
                }
            },
            error: function (e) {
                alert("数据跑丢了");
            }
        });
        layui.use('upload', function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '/upload/' //上传接口
                , done: function (res) {
                    //上传完毕回调
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function (data) {
                
                var title = document.getElementById("test2").value;
                var textarea = document.getElementById('desc').value;
                var mydata = document.getElementById("test3").files[0];
                var formdata = new FormData();
                //formdata.append("title", title);
                //formdata.append("textarea", textarea);
                //formdata.append("file", mydata);
                formdata.append("filename", "泰瑞需要提供的接口.docx");
                //文件上传

                //window.open("http://localhost:31100/fileUpload/download?filename=泰瑞需要提供的接口.docx", '_blank');
                $.ajax({
                    type: "post",
                    //url: "http://localhost:31100/fileUpload/upload",
                    url: "http://localhost:31100/fileUpload/download",
                    //contentType:"application/json;charset=utf-8",
                    data: formdata,
                    dataType: "text",
                    processData: false, // 告诉jQuery不要去处理发送的数据 
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头 
                    async: false,
                    success: function (data) {
                        var check;
                        var code = data.code;
                        if (code != 200) {
                            alert(data.message);
                        } else {
                            window.localStorage.setItem('username', data.user.name);
                            window.opener = null;
                            window.open(' ', '_self');
                            window.close();
                            window.open(url + "szsp.html");
                        }
                    },
                    error: function (e) {
                        alert("数据跑丢了");
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>
